<template>
	<div class="home">
	<!-- 轮播图 -->
		<div class="swiper">
			<swiper :options="swiperOption"  ref="mySwiper">  
	            <!-- 这部分放你要渲染的那些内容 -->  
	            <swiper-slide v-for="item in ShowContent" v-bind:style="{backgroundImage: 'url(' + item.IMG + ')'}">   
	            	<p>{{item.title}}</p>
	            	<p>{{item.text}}</p>
	            </swiper-slide>
	           
	            <!-- 这是轮播的小圆点 -->  
	            <div class="swiper-pagination" slot="pagination"></div>  
	        </swiper>  
		</div>
		<!-- 通告 -->
		<div class="Annunciate">
				
				<ul class="Anuls">
					<span class="volume"><i class="fa fa-volume-up"></i>最新公告</span>
					<ul class="Anuls_list">
						<li v-for="item in AnnunList">
							<span>[{{item.time}}]</span>
							<a :href="'/notice/'+item.listNum">{{item.title}}</a>
							<font v-show="item.new">NEW</font>
						</li>
					</ul> 
					<a class="move_Anu" href="/notice">更多公告>></a>
				</ul>
				
		</div>
		<!-- 五大用处 -->
		<div class="FiveUse">
			<ul class="five_ul">
				<li v-for="item in FiveUseList">
					<i><img :src="item.IMG"></i>
					<p>{{item.title}}</p>
					<p>{{item.text}}</p>
					<a class="detailt" :href="item.href">查看详情</a>
				</li> 
			</ul>
		</div>
		<!-- 微信扫一扫 -->
		<div class="scan">
			<div class="scan_way">
				<div class="scan_left">
					<p>
						<img src="../../assets/home/erweima.jpg">
						<span>用微信扫一扫</span>
					</p>
				</div>
				<div class="scan_right">
					<ul>
						<li><span></span><a>如何获取免费微信售票机？</a></li>
						<li><span></span><a>如何提升游客景区体验？</a></li>
						<li><span></span><a>景区微信公众号如何吸粉？</a></li>
						<li><span></span><a>如何破解景区营销难题？</a></li>
						<li><span></span><a>获取新鲜互联网+景区动态？</a></li>
						<li><span></span><a>了解最新行业解决方案？</a></li>
					</ul>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
 import { swiper, swiperSlide } from 'vue-awesome-swiper'  
export default{
		name:'home',
		components:{
			swiper,  
            swiperSlide 
		},
		data(){
			return{
				swiperOption: {  
                notNextTick: true,  
                pagination: '.swiper-pagination',  
                slidesPerView: 'auto',  
                centeredSlides: true,  
                paginationClickable: true,  
                autoplay: 2500,
       			autoplayDisableOnInteraction: false,
                loop : true,
                spaceBetween:10,
                // effect: 'fade' , //淡入淡出效果,去掉是左滑动效果
                    onSlideChangeEnd: swiper => {  
                        //这个位置放swiper的回调方法  
                        this.page = swiper.realIndex+1;  
                        this.index = swiper.realIndex;  
                    }  
                },
                //背景图内容
                ShowContent:[
                	{
                		IMG:require('../../assets/home/slide/slide-one.jpg'),
                		title:'微信售票机',
                		text:'消灭景区长龙'
                	},
                	{
                		IMG:require('../../assets/home/slide/slide-one.jpg'),
                		title:'微信售票机',
                		text:'消灭景区长龙'
                	},
                	{
                		IMG:require('../../assets/home/slide/slide-one.jpg'),
                		title:'微信售票机',
                		text:'消灭景区长龙'
                	}
                ],
                //公告数据
                AnnunList:[
                	{
                		time:'06.15',
                		listNum:'123456',
                		title:'浦发银行与建设银行系统维护升级通知',
                		new:true
                	},
                	{
                		time:'06.12',
                		listNum:'987654',
                		title:'功能上线】服务商模式发放现金红包',
                		new:false
                	}

                ],
               //五大用处数据
               FiveUseList:[
               	{
               		IMG:require('../../assets/home/fiveuse/use01.png'),
               		title:'自动售票',
               		text:'彻底消灭景区长龙',
               		href:'/UsePage/onePage'

               	},
               	{
               		IMG:require('../../assets/home/fiveuse/use02.png'),
               		title:'互联网取票',
               		text:'极大提升游客体验',
               		href:'/UsePage/twoPage'

               	},
               	{
               		IMG:require('../../assets/home/fiveuse/use03.png'),
               		title:'微信吸粉',
               		text:'天然的“吸粉”神器',
               		href:'/UsePage/threePage'

               	},
               	{
               		IMG:require('../../assets/home/fiveuse/use04.png'),
               		title:'线下分销',
               		text:'商家代理更方便',
               		href:'/UsePage/fourPage'

               	},
               	{
               		IMG:require('../../assets/home/fiveuse/use05.png'),
               		title:'景区联盟',
               		text:'景区互推客源共享',
               		href:'/UsePage/fivePage'

               	}
               ]

			}
		},
		mounted:function(){
			//可以使用swiper这个对象去使用swiper官网中的那些方法 
			 this.swiper.slideTo(0, 0, false);   
		},
		computed:{  
            swiper() {  
              return this.$refs.mySwiper.swiper;  
            }  
        },  
	}
</script>

<style scoped>


@media only screen and (min-width: 1000px){
		 	.swiper{
		 		position: relative;
		 		width: 100%;
		 		height: 533px;

		 	}
			.swiper-container {
			width: 100%;
			height: 100%;
			}
			.swiper-slide {
			background-position: center;
			background-size: cover;
			background:no-repeat;
			background-size: 100% 100%;
			}
			.swiper-slide p{
				text-align: center;
				text-indent: 5%;
			}
			.swiper-slide p:nth-child(1){
				color: #4d4845;
				font-size: 60px;
				font-weight: 800;
				margin-top: 150px;
			}
			.swiper-slide p:nth-child(2){
				color: #00ade6;
				font-size: 50px;
				
			}
			.Annunciate{
				width: 100%;
			}
			.Annunciate .Anuls{
				width: 1000px;
				margin:0 auto;
				overflow: hidden;
				padding: 30px 0;
			}
			.Annunciate .Anuls .volume{
				font-size: 16px;
				color: #4d4845;
				margin-right: 15px;
				float: left;
			}
			.Annunciate .Anuls .volume i{
				font-size: 20px;
				margin-right:15px;
			}
			.Annunciate .Anuls  .Anuls_list{
				width: 785px;
				float: left;
				margin-top: 3px;
			}
			.Annunciate .Anuls  .Anuls_list li{
				float: left;
				margin-right:15px;
				font-size: 14px;
				color: #4d4845;
			}
			.Annunciate .Anuls  .Anuls_list li span{
				color: #999999;
				float: left;
			}
			.Annunciate .Anuls  .Anuls_list li a{
				display:inline-block;
				margin:0 10px;
				color: #4d4845;
				font-size: 14px;
				width: 240px;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis; 
				float: left;

			}
			.Annunciate .Anuls  .Anuls_list li a:hover{
				color: #44bfd9;
				
			}
			.Annunciate .Anuls  .Anuls_list li font{
				color: #fab329;
				float: left;
			}
			.move_Anu{
				float: right;
				color: #999;
				font-size: 16px;
			}
		.FiveUse{
			width: 100%;
			margin-bottom: 60px;
			margin-top:15px;
		}
		.FiveUse .five_ul{
			width:1000px;
			margin:0 auto;
			overflow:hidden;

		}
		.FiveUse .five_ul li{
			float: left;
			width: 194px;
			height:267px;
			border: 1px solid #ebebeb;
			text-align: center;
			margin-left:7px;

		}
		.FiveUse .five_ul li:first-child{
		 	margin-left:0;
		 }

		.FiveUse .five_ul li:hover{
			border: 1px solid #00ade6;
			transition: all .3s ease;
		}
		.FiveUse .five_ul li i{
			display: inline-block;
		}
		.FiveUse .five_ul li i:nth-child(4){
			
		}
		.FiveUse .five_ul li i img{
			margin-top:50px;
			transition: all .3s ease;
		}
		.FiveUse .five_ul li a{
			 width:142px;
			 height: 32px;
			 background-color: #00ade6;
			 color: #fff;
			 line-height: 32px;
			 font-size: 14px;
			 display: none;
			  
		}
		.FiveUse .five_ul li:nth-child(4) i{
			margin-bottom: 18px;
		}
		.FiveUse .five_ul li:nth-child(1) i{
			margin-bottom:-5px;
		}
		.FiveUse .five_ul li:nth-child(5) i{
			margin-bottom:-5px;
		}
		.FiveUse .five_ul li p:nth-child(2){
			font-size: 24px;
			color: #4d4845;
			margin-top: 30px;
		}
		.FiveUse .five_ul li p:nth-child(3){
			font-size: 14px;
			color: #999999;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		.FiveUse .five_ul li:hover a{
			display: inline-block;
			transition: all .3s ease;
		}
		.FiveUse .five_ul li:hover i img{
			margin-top: 30px;
			transition: all .3s ease;
		}
		.scan{
			width: 100%;
			height: 400px;
			margin-bottom: 40px;
		}
		.scan .scan_way{
			width: 1000px;
			margin:0 auto;
		}
		.scan .scan_way .scan_left{
		  width:400px;
		  height: 400px;
		  background-image: url('../../assets/home/xuanyun.png');
		  position: relative;
		  float: left;
		  margin-left: 58px;
		}
		.scan .scan_way .scan_left p{
			position: absolute;
			left: 120px;
			top: 120px;
			display: inline-block;
		}
		.scan .scan_way .scan_left p span{
			display: block;
			text-align: center;
			font-size: 14px;
			color: #b5b4b4;
			margin-top:10px;
		}
		.scan .scan_way .scan_right{
			display: inline-block;
			float: left;
			margin-left: 56px;
		}
		.scan .scan_way .scan_right ul{
			margin-top:50px;
		}
		.scan .scan_way .scan_right li{
			width: 100%;
			font-size: 16px;
			color: #4d4845;
			margin-bottom: 30px;
		}
		.scan .scan_way .scan_right li span{
			display: inline-block;
			width:82px;
			height: 12px;
			background-image:url('../../assets/home/xiabiao.png');
			margin-right: 20px;
		}
		.scan .scan_way .scan_right li:nth-child(2) span,.scan .scan_way .scan_right li:nth-child(5) span{
			margin-left: 40px;
		}
		.scan .scan_way .scan_right li:nth-child(3) span,.scan .scan_way .scan_right li:nth-child(4) span{
			margin-left: 80px;
		}

	}



</style>